import Vue from 'vue'
import Vuex from 'vuex'
import {getdata} from '@/api/index.js'
import pinyin from 'js-pinyin'
Vue.use(Vuex)

interface itemType{
  title:string,
  id:string,
  img:string,
  num:number,
  desc:string,
  pi:string
}

export default new Vuex.Store({
  state: {
    list:[],
    item:[],
    num:[],
    detail:[]
  },
  mutations: {
    SET_LIST(state,payload){
      state.list=payload
        // 首汉字拼音转字母
        const listarr=payload.map((item:itemType)=>{
        // console.log(item)
        return ({
          ...item,
          pi:pinyin.getCamelChars(item.title)[0]
        })
      })
   
      // 排序从A到Z
     const is= listarr.sort((a:itemType,b:itemType)=>{
        return a.pi.charCodeAt()-b.pi.charCodeAt()
      })
      // 提取字母
      const isArr=is.map(item=>{
        return item.pi
      })
        // 字母转数组去重
      const isto=[...new Set(isArr)]
      state.num=isto
      // 循环遍历
      const arr=state.num.map((item)=>{
        return ({
          index:item,
          // 模糊搜索排序中的字母是否全等于去重的字母
          children:is.filter((v:itemType)=>v.pi===item)
        })
      })
      state.item=arr
      // console.log(state.item)
  
    },
    SET_DETAIL(state,payload){
        state.detail=state.list.find(v=>v.id===payload)
        // console.log(state.detail)
    }
  
  },
  actions: {
   async GET_LIST({commit}){
     const resp=await getdata()
        commit('SET_LIST',resp.data.data)  
    },
  },
  modules: {
  }
})
